<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    1.引入vue.js-->
    <script src="js/vue.js"></script>
</head>
<body>
<!-- 挂载节点-->
<div id="app">
    <h2>v-text: 通过data中的数据更新标签标签中的 属性的值.(标签中的文本内容)</h2>
    <span v-text="message"></span><br/>
    <span v-text="user.username"></span><br/>
    <h2>v-html指令:通过data中的数据更新标签标签中的innerHTML属性的值.(标签中的HTML内容)</h2>
    <div v-html="message"></div>
    <h2>v-bind指令:将data中的数据绑定到标签上,作为标签的属性</h2>
    <img v-bind:src="imgsrc" v-bind:title = "title"/>
    <h5>>v-bind 可以省略 只用 :属性名</h5>
    <img :src="imgsrc" v-bind:title = "title"/>
    <h2>v-show指令: 根据表达式之真假值，切换元素的 display CSS 属性。当条件变化时该指令触发过渡效果。
        当v-show的值为假时,  会在标签的css中添加 display: none :</h2>

    <div v-show="show">你看到我了!</div>
    <div v-show="hidden">你看不到我了!</div>
    <h2>###  v-if指令

        **语法:**
        <标签名 v-if="表达式"></标签名>

        **作用:**
        根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。</h2>
    <div v-if="show">you can see me!</div>
    <div v-if="hidden">you can't see me</div>


    <h2>
        ### v-on指令

        使用v-on指令注册事件

        语法<标签 v-on:事件句柄="表达式或者事件处理函数"></标签>
        简写方式：
        <标签 @事件句柄="表达式或者事件处理函数"></标签>

    </h2>
    <input type="button"  v-on:click="sayhello" value="点我一下"/>
</div>
</body>
<script type="text/javascript">
    //创建Vue对象
    new Vue({
        el:"#app",//挂载点
        data:{
            title:"网易云",
            imgsrc:"img/下载.jpg",
            message: "<h1>这是一个Span!</h1>",
            "show":true,
            "hidden":false,
            user: {
                username: "lw"
            },

        },//数据

        methods:{
            sayhello(){
                console.log("触发了")
            }


        },

    })
</script>
</html>